<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>中国法学会课题管理系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/website/css/website.css}" media="all">
    <link rel="stylesheet" th:href="@{/website/css/eleTree.css}" media="all">
    <link rel="stylesheet" th:href="@{/website/css/apexcharts.min.css}" media="all">
    <link rel="stylesheet" th:href="@{/website/css/formSelects-v4.css}" media="all">
    <link rel="icon" th:href="@{/website/images/favicon.ico}" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{/website/css/client.css}" media="all">
</head>
<body>
<div id="font-index" lay-title="通知详情">
    <div class="layui-header layui-anim website-anim-down layui-row" id="client-header">
        <div class="layui-col-md3 logoDiv">
            <div class="layui-logo">
                <div class="logoDivInside layui-logo">
                    <img data-th-src="@{../../website/images/logo.png}">
                    <span>中国法学会课题管理系统</span>
                </div>
            </div>
        </div>
        <div class="layui-col-md2 layui-col-md-offset7">
            <ul class="layui-nav">
                <li class="layui-nav-item layui-hide-xs">
                    <button class="layui-btn layui-btn-radius layui-btn-sm" id="loginBtn">
                        <i class="layui-icon">&#xe66f;</i>登录
                    </button>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-card layui-fluid layui-row front-row website-container" id="notice-detail">
        <div class="layui-card-header">
            <div class="layui-col-md-offset1 layui-col-md1">详情</div>
        </div>
        <div class=" layui-card-body layui-col-md10 layui-col-sm10 layui-col-xs10 layui-col-md-offset1">
            <form class="layui-form" lay-filter="notice-detail-form">
                <div class="layui-form-item website-hide">
                    <label class="layui-form-label website-form-item-require">通知公告id：</label>
                    <div class="layui-input-block">
                        <input type="text" name="noticeId" data-th-value="${notice.noticeId}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-col-md6">
                        <label class="layui-form-label website-form-item-require">标题：</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" data-th-value="${notice.title}"
                                   readonly class="layui-input notice-text">
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <label class="layui-form-label">发布时间：</label>
                        <div class="layui-input-block">
                            <input type="text" name="publishTime" readonly class="layui-input notice-text">
                        </div>
                    </div>
                </div>
                <!--<div class="layui-form-item">
                    <div class="layui-col-md6">
                        <label class="layui-form-label website-form-item-require">类型：</label>
                        <div class="layui-input-block">
                            <input type="text" name="typeCode" data-th-value="${typeCode.name}" readonly
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-md6" id="year">
                        <label class="layui-form-label website-form-item-require">年份：</label>
                        <div class="layui-input-block">
                            <input type="text" name="year" data-th-value="${notice.year}" readonly
                                   class="layui-input">
                        </div>
                    </div>
                </div>-->
                <!--<div class="layui-form-item website-hide" id="selectTimeDiv">
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <label class="layui-form-label website-form-item-require">征集开始时间：</label>
                            <div class="layui-input-block">
                                <input type="text" name="selectBeginTime" class="layui-input" readonly
                                       id="selectBeginTime">
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <label class="layui-form-label website-form-item-require">征集结束时间：</label>
                            <div class="layui-input-block">
                                <input type="text" name="selectEndTime" class="layui-input" readonly id="selectEndTime">
                            </div>
                        </div>
                    </div>
                </div>-->
                <!--<div class="layui-form-item website-hide" id="preTimeDiv">
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <label class="layui-form-label website-form-item-require">拟立项开始时间：</label>
                            <div class="layui-input-block">
                                <input type="text" name="preBeginTime" class="layui-input" readonly
                                       id="preBeginTime">
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <label class="layui-form-label website-form-item-require">拟立项结束时间：</label>
                            <div class="layui-input-block">
                                <input type="text" name="pretEndTime" class="layui-input" readonly id="pretEndTime">
                            </div>
                        </div>
                    </div>
                </div>-->

                <!--<div class="layui-form-item website-hide" id="submitTimeDiv">
                    <div class="layui-row">
                        <div class="layui-col-md4">
                            <label class="layui-form-label website-form-item-require">提交开始时间：</label>
                            <div class="layui-input-block">
                                <input type="text" name="submitBeginTime" class="layui-input" readonly
                                       id="submitBeginTime">
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <label class="layui-form-label website-form-item-require">意向表结束时间：</label>
                            <div class="layui-input-block">
                                <input type="text" name="intentionSubmitEndTime" class="layui-input" readonly
                                       id="intentionSubmitEndTime">
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <label class="layui-form-label website-form-item-require">申请表结束时间：</label>
                            <div class="layui-input-block">
                                <input type="text" name="applySubmitEndTime" class="layui-input" readonly
                                       id="applySubmitEndTime">
                            </div>
                        </div>
                    </div>
                </div>-->
                <!--<div class="layui-form-item" id="endTimeDiv">
                    <div class="layui-row">
                        <div class="layui-col-md4 website-hide" id="period">
                            <label class="layui-form-label website-form-item-require">期次：</label>
                            <div class="layui-input-block">
                                <input type="text" name="period" data-th-value="${topicPlan == null ? '' :topicPlan.period }"
                                       class=" layui-input" readonly>
                            </div>
                        </div>
                        <div class="layui-col-md4 website-hide" id="endApplySubmitBeginTime">
                            <label class="layui-form-label website-form-item-require">结项申请开始时间：</label>
                            <div class="layui-input-block">
                                <input type="text" name="endApplySubmitBeginTime" class="layui-input"
                                       readonly>
                            </div>
                        </div>
                        <div class="layui-col-md4 website-hide" id="endApplySubmitEndTime">
                            <label class="layui-form-label website-form-item-require">结项申请结束时间：</label>
                            <div class="layui-input-block">
                                <input type="text" name="endApplySubmitEndTime" class="layui-input"
                                       readonly>
                            </div>
                        </div>

                    </div>
                </div>-->

                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label website-form-item-require">内容：</label>
                            <div class="layui-input-block">
                        <textarea id="notice-content" name="content" placeholder="请输入内容" readonly
                                  class="layui-textarea notice-text" onload=""
                                  th:text="${notice.content}"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label">附件：</label>
                            <div class="layui-input-block">
                                <a id="upload-file-notice" class="layui-form-label" style="text-align: left"></a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="layui-card-footer">
                <div class="layui-row ">
                    <div class="layui-inline layui-col-md3" style="float: left">
                        上一篇：<a th:if="${last}" th:href="'/front/noticeDetail/'+${last.noticeId}">[[${last.title}]]</a>
                    </div>
                    <div class="layui-inline layui-col-md3 layui-col-md-offset6">
                        下一篇： <a th:if="${next}" th:href="'/front/noticeDetail/'+${next.noticeId}">[[${next.title}]]</a>
                    </div>

                </div>
                <div class="layui-row">
                    <button th:if="${nlxgg}" class="layui-btn" id="report">举报</button>
                    <button type="reset" class="layui-btn" id="returnBtn">返回</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script data-th-inline="javascript">
    let ctx = [[@{/}]];
        layui.extend({
            dict: '/website/lay/modules/dict',
            validate: '/website/lay/modules/validate',
            formSelects: '/website/lay/extends/formSelects-v4.min'
        }).use(['form', 'laytpl', 'layer', 'dict', 'util', 'formSelects', 'upload', 'layer', 'validate'], function () {
            let $ = layui.$,
                formSelects = layui.formSelects,
                form = layui.form,
                dict = layui.dict,
                util = layui.util,
                upload = layui.upload,
                layer = layui.layer,
                validate = layui.validate,
                noticeContent = $('#notice-content')[0],

                notice = [[${notice}]],
                declareTopics = [[${declareTopics}]],
                topicPlan = [[${topicPlan}]],
                login = [[${login}]];
            initFormValue();
            form.render();
            formSelects.render();
            if (login) {
                $('#client-header').hide()
            }
            $("#loginBtn").click(function () {
                window.location.href = ctx + "login";
            });
            $("#returnBtn").click(function () {
                window.location.href = ctx + "front/index";
            });

            function initFormValue() {
                if (notice) {
                    // “课题征集”公告的“征集开始时间”、‘征集结束时间’在一行显示，不要换行，缺少“年份”字段的显示
                    /* if (notice.typeCode === "notice_type_ktzj") {
                         $("#selectTimeDiv").removeClass("website-hide");
                     }

                     // “申报公告”通知，‘提交开始时间’、‘意向表结束时间’、‘申请表结束时间’字段名在一行显示，不要换行，缺少“年份”字段的显示
                     if (notice.typeCode === "notice_type_ktzn") {
                         $("#submitTimeDiv").removeClass("website-hide");
                     }

                     // “立项公告”通知 显示 “年份”字段的
                     if (notice.typeCode === "notice_type_lxgg") {
                         $("#endTimeDiv").removeClass("website-hide");
                     }
                     //“结项通知”显示 ‘期次’、‘结项申请开始时间’、‘结项申请结束时间’字段；
                     if (notice.typeCode === "notice_type_jxgg") {
                         $("#period").removeClass("website-hide");
                         $("#endApplySubmitBeginTime").removeClass("website-hide");
                         $("#endApplySubmitEndTime").removeClass("website-hide");

                     }
                     // 结项结果公告 “期次” 显示
                     if (notice.typeCode === "notice_type_jxjggg") {
                         $("#period").removeClass("website-hide");
                         $("#year").addClass("website-hide");
                     }

                     // “拟立项公告”通知 显示 拟立项的年份、拟立项开始时间、拟立项结束时间字段；
                     if (notice.typeCode === 'notice_type_nlxgg') {
                         $("#preTimeDiv").removeClass("website-hide");
                     }*/

                    if (notice.fileId) {
                        $("#upload-file-notice").text('点击下载');
                        $("#upload-file-notice")[0].setAttribute('href', ctx + 'download/' + notice.fileId)
                    } else {
                        $("#upload-file-notice").text('无附件');
                    }
                    //
                    form.val("notice-detail-form", {
                        "noticeId": notice.noticeId,
                        "title": notice.title,
                        "publishTime": layui.util.toDateString(notice.publishTime, 'yyyy-MM-dd'),
                        // 课题征集
                        "selectBeginTime": notice.typeCode === "notice_type_ktzj" ? layui.util.toDateString(topicPlan.selectBeginTime, 'yyyy-MM-dd') : "",
                        "selectEndTime": notice.typeCode === "notice_type_ktzj" ? layui.util.toDateString(topicPlan.selectEndTime, 'yyyy-MM-dd') : "",
                        // 拟立项公告
                        "preBeginTime": notice.typeCode === "notice_type_nlxgg" ? layui.util.toDateString(topicPlan.preItemBeginTime, 'yyyy-MM-dd') : "",
                        "pretEndTime": notice.typeCode === "notice_type_nlxgg" ? layui.util.toDateString(topicPlan.preItemEndTime, 'yyyy-MM-dd') : "",
                        // 课题指南
                        "submitBeginTime": notice.typeCode === "notice_type_ktzn" ? layui.util.toDateString(topicPlan.submitBeginTime, 'yyyy-MM-dd') : "",
                        "intentionSubmitEndTime": notice.typeCode === "notice_type_ktzn" ? layui.util.toDateString(topicPlan.intentionSubmitEndTime, 'yyyy-MM-dd') : "",
                        "applySubmitEndTime": notice.typeCode === "notice_type_ktzn" ? layui.util.toDateString(topicPlan.applySubmitEndTime, 'yyyy-MM-dd') : "",
                        // 拟立项 委托课题没有征集时间所以复用字段
                        "endApplySubmitBeginTime": notice.typeCode === "notice_type_jxgg" ? layui.util.toDateString(topicPlan.selectBeginTime, 'yyyy-MM-dd') : "",
                        "endApplySubmitEndTime": notice.typeCode === "notice_type_jxgg" ? layui.util.toDateString(topicPlan.selectEndTime, 'yyyy-MM-dd') : "",
                        "content": notice.content
                    });
                }

            }

            $('#report').on('click', function () {
                layer.open({
                    type: 1
                    , title: '填写举报信息' //不显示标题栏
                    , shade: 0.3
                    , area: $(window).width() <= 750 ? '80%' : '50%'
                    , id: 'LAY_layui_index_report' //设定一个id，防止重复弹出
                    , btn: ['提交', '关闭']
                    , btnAlign: 'c'
                    , zIndex: layer.zIndex
                    , moveType: 1 //拖拽模式，0或者1
                    , content: '<div class="layui-row">' +
                        '<form class="layui-form" id="notice-report-form" lay-filter="notice-report-form">\n' +
                        '            <div class="layui-form-item layui-row">\n' +
                        '                <div class="layui-col-md6">\n' +
                        '                    <label class="layui-form-label website-form-item-require">拟立项课题：</label>\n' +
                        '                    <div class="layui-input-block">\n' +
                        '    <select name="declareId" lay-verify="required"   lay-filter="title">\n' +
                        '<option value="">请选择</option>' +
                        appendTopicHtml() +
                        '        </select>            </div>\n' +
                        '                </div>\n' +
                        '                <div class="layui-col-md6">\n' +
                        '                    <label class="layui-form-label website-form-item-require">姓名：</label>\n' +
                        '                    <div class="layui-input-block">\n' +
                        '                        <input type="text" name="name" lay-verify="required" class="layui-input">\n' +
                        '                    </div>\n' +
                        '                </div>\n' +
                        '            </div>\n' +
                        '            <div class="layui-form-item">\n' +
                        '                <div class="layui-row">\n' +
                        '                    <div class="layui-col-md6">\n' +
                        '                        <label class="layui-form-label website-form-item-require">邮箱号：</label>\n' +
                        '                        <div class="layui-input-block">\n' +
                        '                            <input type="text" name="email" id="email" lay-verify="required|email"  class="layui-input">\n' +
                        '                        </div>\n' +
                        '                    </div>\n' +
                        '                    <div class="layui-col-md6">\n' +
                        '                        <label class="layui-form-label">附件：</label>\n' +
                        '                        <div class="layui-input-block">\n' +
                        '<a id="upload-file-a"></a>' +
                        '                            <button id="upload-file" type="button" class="layui-btn">\n' +
                        '                                <i class="layui-icon">&#xe67c;</i>上传附件\n' +
                        '                            </button>\n' +
                        '                        </div>\n' +
                        '                    </div>\n' +
                        '                </div>\n' +
                        '            </div>\n' +
                        '<div class="layui-form-item">\n' +
                        '                                    <div class="layui-row layui-col-xs9 layui-col-sm9 layui-col-md9">\n' +
                        '                                        <div class=" layui-col-xs8 layui-col-sm8 layui-col-md8">\n' +
                        '                                            <label class="layui-form-label website-form-item-require">验证码：</label>\n' +
                        '            <div class="layui-input-block">\n' +
                        '                                            <input type="text" id="verifyCode" maxlength="4" name="verifyCode" lay-verify="required"\n' +
                        '                                                   placeholder="请输入验证码" class="layui-input" autocomplete="off">\n' +
                        '            </div>\n' +
                        '                                        </div>\n' +
                        '                                        <div class="layui-col-xs4">\n' +
                        '                                            <img class="codeimg" id="registerCodeImg"/>\n' +
                        '                                        </div>\n' +
                        '                                    </div>\n' +
                        '                                </div>\n' +
                        '<div class="layui-form-item">\n' +
                        '                                    <div class="layui-row layui-col-xs9 layui-col-sm9 layui-col-md9">\n' +
                        '                                        <div class="layui-col-xs8 layui-col-sm8 layui-col-md8">\n' +
                        '                                            <label class="layui-form-label website-form-item-require">邮箱验证码：</label>\n' +
                        '            <div class="layui-input-block">\n' +
                        '                                            <input type="text" maxlength="6" id="smsCode" name="smsCode" lay-verify="required"\n' +
                        '                                                   placeholder="请输入邮箱验证码" class="layui-input" autocomplete="off">\n' +
                        '            </div>\n' +
                        '                                        </div>\n' +
                        '                                        <div class="layui-col-xs4">\n' +
                        '                                            <button class="layui-btn layui-btn-normal layui-btn-fluid"\n' +
                        '                                                    id="get-sms-code">点击获取验证码\n' +
                        '                                            </button>\n' +
                        '                                        </div>\n' +
                        '                                    </div>\n' +
                        '                                </div>\n' +
                        '            <div class="layui-form-item">\n' +
                        '                <div class="layui-row">\n' +
                        '                    <div class="layui-col-md12">\n' +
                        '                        <label class="layui-form-label website-form-item-require">举报内容：</label>\n' +
                        '                        <div class="layui-input-block">\n' +
                        '                        <textarea name="content" placeholder="请输入内容" class="layui-textarea"\n' +
                        '                                   rows="15"></textarea>\n' +
                        '                        </div>\n' +
                        '                    </div>\n' +
                        '   <button class="layui-btn layui-btn-normal layui-btn-fluid layui-hide" lay-submit\n' +
                        '                lay-filter="report-submit" id="report-submit">\n' +
                        '            提交</button>' +
                        '                </div>\n' +
                        '            </div>\n' +
                        '        </form>' +
                        '            </div>\n'
                    , yes: function (index, layero) {
                        let $submit = $('#report-submit')
                        $('#report-submit')[0].setAttribute("layer_index", index)
                        $submit.trigger('click')

                    }, success: function () {
                        let $getSMSCode = $('#get-sms-code');
                        initCode()

                        function initCode() {
                            $('#registerCodeImg').attr("src", ctx + "images/captcha?data=" + new Date().getTime());
                        }

                        $('#registerCodeImg').on('click', function () {
                            initCode();
                        });
                        $getSMSCode.on('click', function () {

                            let verifyCode = $('#verifyCode').val(),
                                email = $('#email').val();
                            let validateInfo = validate.email(email)
                            if (!validateInfo && email) {
                                $.get(ctx + 'register/getEmailCode/' + email, {verifyCode: verifyCode}, function (data) {
                                    debugger
                                    if (data.code === 200) {
                                        layer.alert("邮件发送成功，请注意查收！验证码有效期 180秒！");
                                    } else {
                                        layer.msg(data.message);
                                    }
                                })
                            } else {
                                layer.msg(validateInfo);
                            }
                            return false;
                        });
                        //     上传文件
                        let uploadFile = upload.render({
                            elem: '#upload-file' //绑定元素
                            , url: '/upload' //上传接口
                            , accept: 'file'
                            , done: function (res) {
                                //上传完毕回调
                                if (res.code === 200) {
                                    layer.alert('上传文件成功');
                                    let data = res.data
                                    $('#upload-file')[0].setAttribute('file-id', data.fileId)
                                    $('#upload-file-a')[0].setAttribute('href', ctx + 'download/' + data.fileId)
                                    $("#upload-file-a").text(data.name)
                                    //上传完毕回调
                                }
                            }
                            , error: function () {
                                //请求异常回调
                                layer.alert('上传文件失败');
                            }
                        });
                        //提交登录表单
                        form.on('submit(report-submit)', function (data) {
                            data.field.fileId = $('#upload-file')[0].getAttribute('file-id')
                            $.post(ctx + 'biz/report', data.field, function (r) {
                                layer.alert('举报成功', {time: 1500}, function () {
                                    layer.closeAll()
                                });
                            });
                            return false;
                        });
                        form.render();
                    }
                });
            })
            noticeContent.style.height = noticeContent.scrollHeight + 'px';

            function appendTopicHtml() {
                let html = ''
                $.each(declareTopics, function (i, item) {
                    html += '<option value="' + item.declareId + '">' + item.name + '</option>'
                })
                return html
            }

        })
    ;
</script>
</body>
</html>

<style>
    .layui-logo img {
        width: 32px;
        margin-bottom: 4px;
        margin-right: 3px;
        display: inline-block;
        vertical-align: middle
    }

    .layui-nav {
        background-color: transparent;
    }

    .layui-nav .layui-nav-item {
        margin-left: 5px;
    }

    .logoDiv {
        transform: translateY(50%);
        font-size: 18px;
        color: #f0f0f0;
        width: 24%;
    }

    .logoDivInside {
        transform: translateX(44%);
    }

    .website-tabs-wrap {
        margin-top: 10px;
    }

    .layui-card {
        min-height: 380px;
    }

    .layui-card-body ul li a {
        color: black;
    }

    .layui-card-body ul li a:hover {
        color: #3775f9;
    }

    .layui-form-label {
        width: 130PX;
    }

    .layui-input-block {
        margin-left: 160px
    }

    .notice-text {
        border: none;
    }

    .notice-text:focus {
        border-color: transparent !important;
        box-shadow: 0 0 0 0 transparent;
    }
</style>